<!--
 * @Author: xxx
 * @Description:
-->
<template>
  <div class="UserLogo">
    <div class="search-region">
      <el-input
        v-model="search_val"
        style="width: 240px"
        placeholder="输入关键词"
        :prefix-icon="Search"
      >
        <template #append>
          <el-button :icon="Search" @click="submit_search"/>
        </template>
      </el-input>
    </div>
    <el-button type="primary"  v-if="loginShow" circle  @click="goTologin()" >登录</el-button>
    <el-dropdown trigger="click" size="default" @command="handleCommand"  v-else>
      <div  class="avatar-region">
        <img class='avatar-img'  :src="$fullUrl($banseUrl,avatar)"/>
        <!-- src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" -->
        <!-- <span>{{nickname}}</span> -->
        <el-icon><CaretBottom /></el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="个人中心" disabled>
            <span class="avatar-name">用户名：{{nickname}}</span></el-dropdown-item
          >
          <el-dropdown-item command="个人中心" >个人中心</el-dropdown-item>
          <el-dropdown-item command="个人账户">个人账户</el-dropdown-item>
          <el-dropdown-item command="收货地址">收货地址</el-dropdown-item>
          <el-dropdown-item command="修改密码">修改密码</el-dropdown-item>
          <el-dropdown-item command="退出登录" divided>退出登录</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
      
    </el-dropdown>
    <!-- <PasswordDialog v-model:dialogVisible="dialogVisible"></PasswordDialog> -->
  </div>
</template>

<script setup>
import { $post, $get } from "@/api/Api.js";
import { ref,computed,onMounted,watch } from "vue";
import { useStore } from 'vuex'
import storageHelper from '@/libs/StorageHelper.js'
import { Search, ArrowDown, CaretBottom } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
let router = useRouter();
// import { logout } from '@/api/com-api/login'
// import storageHelper from '@/libs/StorageHelper'
import { paramsFun, $fullUrl, $toTime, $banseUrl } from "@/utils/utils.js";
// import PasswordDialog from './PasswordDialog.vue'
let store = useStore()
let user_group = computed(() => store.state.userStoreModule.user_group)
// let nickName = computed(() => store.getters['userStoreModule/nickName'])
let sign_out = (payload) => store.commit("userStoreModule/sign_out", payload);
let dialogVisible = ref(false);
let search_val = ref('');
let submit_search=()=>{
    router.push("/search?word=" +search_val.value);
}
let  to_admin=()=> {
  router.push("/user_center/index");
}
let goTologin = () => {
console.log(1111)
router.push("/login");
};
let sign_out_fun=()=>{
        sign_out([]);
        $get("/api/user/quit").then((res) => {
          loginShow.value=true
          store.commit('web/set_auth', [])
          store.commit('userStoreModule/user_group', '')
          nickname.value=''
          avatar.value=''
          sessionStorage.removeItem('nickname');
          sessionStorage.removeItem('avatar');
          window.location.reload();

        })
        //store.state.userStoreModule.user_group
       
     
        //location.reload();
        // location.href = location.href
}
let handleCommand = (name) => {
  switch (name) {
    case "个人中心":
    router.push("/user_center")
      break;
      case "个人账户":
    router.push("/user/info")
      break;  
    case "修改密码":
    router.push("/password")
      // dialogVisible.value = true;
      break;
    case "收货地址":
    router.push("/user/address_edit")
      break;
    case "退出登录":
     sign_out_fun()
      break;
  }
};
let nickname=ref('')
let avatar=ref('')
let   get_user_GD=async()=>{
    let sd = await $get("/api/user/get_list")

    let userD = sd.result.list

    let userG =user_group.value.user_group
    //JSON.parse
    //console.log(storageHelper.getUserInfo().user_group)
    // console.log(userG)
    for (let i = 0; i < userD.length; i++) {
      const dara = userD[i];
      if (dara.user_group === userG) {
        sessionStorage.setItem('avatar',dara.avatar)
        sessionStorage.setItem('nickname',dara.nickname)
        nickname.value=dara.nickname
        console.log(dara.nickname)
        avatar.value=dara.avatar
        console.log(dara)
        return
      }
    }

  }
  let loginShow=ref(true)
  onMounted(()=>{
    get_user_GD()
   
  })

 watch(nickname, (newValue, oldValue) => {
  console.log()
    if(newValue){
      sessionStorage.setItem('loginShow',false)
    loginShow.value=false
    
  }else{
    sessionStorage.setItem('loginShow',true)
    loginShow.value=true
  }
    
    
  console.log(`nickname changed from ${oldValue} to ${newValue}`);
  });
</script>

<style lang="less" scoped>
.UserLogo {
  height: 60px;
  padding-right: 5px;
  border-bottom: 1px solid #e6e6e6;
  cursor: pointer;
  .search-region {
    height: 61px;
    display: inline-block;
    line-height: 61px;
    margin-right: 50px;
  }
  .avatar-region {
    height: 61px;
    display:flex;
    align-items: center;
    justify-content: center;
    .avatar-img {
      height: 40px;
      width: 40px;
      border-radius:100%;
    }
    .avatar-name {
      margin-left: 10px;
    }
  }
}
</style>
